import React, { useEffect, useRef } from "react";

const AQILevels = ({ levelText, active }) => {
  const canvasRef = useRef(null);

  // 定义常量
  const LINE_WIDTH_THICK = 4;
  const LINE_WIDTH_THIN = 2;
  const LINE_COLOR_ACTIVE_DEFAULT = "#ddf3ff";
  const LINE_COLOR_INACTIVE_DEFAULT = "#2e3c40";
  const LINE_COLOR_ACTIVE_SPECIFIC = "#1b79ff";

  // 封装绘制线条的函数
  const drawLine = (context, startX, startY, endX, endY, strokeStyle, lineWidth) => {
    context.beginPath();
    context.moveTo(startX, startY);
    context.lineTo(endX, endY);
    context.strokeStyle = strokeStyle;
    context.lineWidth = lineWidth;
    context.stroke();
  };

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const context = canvas.getContext("2d");
    if (!context) return;

    // 创建线性渐变对象
    const gradient = context.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop(0, "#1b79ff");
    gradient.addColorStop(0.5, "#00edff");
    gradient.addColorStop(1, "#1b79ff");

    // 绘制第一条线（水平线）
    drawLine(
      context,
      5,
      5,
      22,
      5,
      active ? LINE_COLOR_ACTIVE_DEFAULT : LINE_COLOR_INACTIVE_DEFAULT,
      LINE_WIDTH_THICK
    );

    // 绘制后续线条
    drawLine(
      context,
      22,
      5,
      50,
      5,
      active ? LINE_COLOR_ACTIVE_SPECIFIC : LINE_COLOR_INACTIVE_DEFAULT,
      LINE_WIDTH_THIN
    );
    drawLine(
      context,
      50,
      5,
      60,
      17,
      active ? LINE_COLOR_ACTIVE_SPECIFIC : LINE_COLOR_INACTIVE_DEFAULT,
      LINE_WIDTH_THIN
    );
    drawLine(
      context,
      60,
      17,
      300,
      15,
      active ? gradient : LINE_COLOR_INACTIVE_DEFAULT,
      LINE_WIDTH_THIN
    );

    return () => {
      if (context) {
        // 清除 canvas 内容
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
    };
  }, [active]);

  // 提取重复的样式
  const rotatedSquareStyle = {
    width: "7px",
    height: "7px",
    transform: "rotate(45deg)",
  };

  return (
    <div style={{ marginBottom: "5px", position: "relative" }}>
      <div
        style={{
          position: "absolute",
          color: "#FFF",
          left: "70px",
          bottom: "10px",
          fontSize: "13px",
        }}
      >
        {levelText}
      </div>
      <canvas ref={canvasRef} width={300} height={20} />
      <div
        style={{
          display: "flex",
          left: "15px",
          top: "12px",
          position: "absolute",
          justifyContent: "space-between",
          width: "34px",
        }}
      >
        <div
          style={{
            ...rotatedSquareStyle,
            backgroundColor: active ? "#0068ff" : "#2e3c40",
          }}
        ></div>
        <div
          style={{
            ...rotatedSquareStyle,
            backgroundColor: active ? "#25ff2a" : "#2e3c40",
          }}
        ></div>
        <div
          style={{
            ...rotatedSquareStyle,
            backgroundColor: active ? "azure" : "#2e3c40",
          }}
        ></div>
      </div>
    </div>
  );
};

export default AQILevels;